body {
    background-color: #dbdde0;
    font-family: "微软雅黑";
}

// 标头

.header {
    background-color: #333333;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 120px;
    width: 100%;

    // position: fixed;
    .part-one {
        height: 63px;
        margin-left: 100px;
    }

    .part-two {
        height: 50px;
        width: 90%;
        display: flex;
        margin-left: 120px;

        justify-content: space-between;

        p {
            font-weight: lighter;
            color: white;
            margin: 10px;
            letter-spacing: 3px;
        }

        background-color: #222222;

        .right {

            display: flex;
            flex-direction: row;

           
        }

        .left {
            display: flex;
            flex-direction: row;
        }

    }
}

//主体
.bac {
    background-color: #dbdde0;
    height: 1000px;
    width: 100%;

    .body {
        display: flex;
        justify-content: space-between;
        margin-left: 100px;
        margin-right: 30px;
        height: 100%;
        margin-top: 20px;
        margin-top: 0.1vw solid #333;
        background-color: white;

        .left {
            width: 22%;
            display: flex;
            align-items: flex-start;
            font-family: "微软雅黑";
            text-align: right;
            flex-direction: column;

            .one {
                margin-top: 20px;
                line-height: 0%;

                color: white;
                background-color: red;
                width: 180px;

                .one1 {
                    font-weight: bolder;

                }

                .one2 {
                    font-weight: lighter;
                }

            }

            .two {
                margin-top: 300px;
                line-height: 0%;
                color: white;
                background-color: red;
                width: 180px;

                .two1 {
                    font-weight: bolder;

                }

                .two2 {
                    font-weight: lighter;
                }
            }

        }
//中部
        .middle {
            width: 60%;
            height: 800px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-right: 30px;
         
            
            .up{margin-top: 20px;
                display: flex;
                height: 347px;
                flex-direction: row;
                justify-content:space-between ;
                text-align: center;
                .one {
                    border: 1px solid #AAAAAA;
                    margin-right: 10px;
                    height: 243px;
                }
                .two {
                    border: 1px solid #AAAAAA;
                    margin-right: 10px;
                    height: 243px;
                }
                .three {
                    border: 1px solid #AAAAAA;
                    margin-right: 10px;
                    height: 243px;
                }


                }

                
            }
            .bottom{
                display: flex;
                height: 635px;
                flex-direction: row;
                justify-content: space-between;
               
                .left{
                    height: 620px;
                    width: 48%;
                    
                    flex-direction: row;
                    flex-wrap: wrap;
                }
                .right{
                    height: 620px;
                    width: 48%;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: center;
                    
                }
                
            }

        }

        .right {
            display: flex;
            width: 25%;
            align-items: flex-start;
            flex-direction: column;
            flex-wrap: nowrap;
            background-color:#dbdde0 ;


            // margin-top: 10px;
            .two{
                margin-left:18px;
            }
            .three{
                margin-left:18px;
            }
            .one {
                flex-wrap: nowrap;

                height: 20px;
                font-weight: bolder;
                font-size: 17px;
                margin-left:18px;

                .p {
                    flex-wrap: nowrap;
                }
            }

            .pic1 {
                margin-left: 20px;
                display: flex;
                flex-direction: row;
                width: 198px;
                height: 85px;

                justify-content: space-around;


            }

            .pic2 {
                display: flex;
                flex-direction: row;
                width: 188px;

                height: 160px;
                justify-content: space-around;
                margin-left: 20px;

                p1 {
                    display: flex;
                    flex-direction: column;
                }



            }

        }
    }
